<template>
    <div class="container">
        <div class="warp">
            <div class="rditype f-pr f-cb">
                <div class="boxes j-flag">
                    <!-- 第一页 -->
                    <ul class="box f-cb" :class="{ 'z-show': currentPage === 0 }">
                        <li v-for="(item, index) in firstPage" :key="index">
                            <a :href="item.link">
                                <div class="icon" :style="{ backgroundImage: `url(${item.img})` }"></div>
                                <em>{{ item.text }}</em>
                            </a>
                        </li>
                    </ul>
                    <!-- 第二页 -->
                    <ul class="box f-cb" :class="{ 'z-show': currentPage === 1 }">
                        <li v-for="(item, index) in secondPage" :key="index">
                            <a :href="item.link">
                                <div class="icon" :style="{ backgroundImage: `url(${item.img})` }"></div>
                                <em>{{ item.text }}</em>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 左右按钮 -->
                <span class="prev" :class="{ 'z-dis': currentPage === 0 }" @click="prevPage">向左</span>
                <span class="next" :class="{ 'z-dis': currentPage === 1 }" @click="nextPage">向右</span>

                <!-- 底部圆点 -->
                <div class="dotpage j-flag">
                    <span class="dot" :class="{ 'z-curr': currentPage === 0 }" @click="goToPage(0)">1</span>
                    <span class="dot" :class="{ 'z-curr': currentPage === 1 }" @click="goToPage(1)">2</span>
                </div>
            </div>
            <div class="rditop f-cb">
                <div class="blk f-fl">
                    <div class="u-title f-cb">
                        <h3><a href="/discover/djradio/recommend" class="f-ff2">推荐节目</a></h3>
                        <a href="/discover/djradio/recommend" class="more s-fc3">更多 &gt;</a>
                    </div>
                    <ul class="m-plylist toplist">
                        <li class="itm ">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/IwEri9oMvhEILSqMqn-pJA==/109951171016220291.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077559983" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077559983" class="s-fc1 f-fw0"
                                        title="方大同、王菲、莫文蔚、毛不易、孙燕姿等...热门单曲应接不暇！榜首金曲（2025第一季）综合榜">方大同、王菲、莫文蔚、毛不易、孙燕姿等...热门单曲应接不暇！榜首金曲（2025第一季）综合榜</a>
                                </h3>
                                <p class="f-thide"><a href="/djradio?id=1187037" class="s-fc4" title="依听就爱">依听就爱</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm bg">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/y2ZZ4w0Put0R7pyrJvtQ9A==/109951170095586835.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077491422" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077491422" class="s-fc1 f-fw0"
                                        title="与罗大佑共聊18岁：我们着迷的歌">与罗大佑共聊18岁：我们着迷的歌</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1215114488" class="s-fc4"
                                        title="内地民谣往事：1994-2024">内地民谣往事：1994-2024</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm ">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/0t84SHIe8v9E5qaUY5rEHQ==/109951170919026386.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3076633123" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3076633123" class="s-fc1 f-fw0"
                                        title="D’Angelo《Untitled (How Does It Feel)》重新定义了Neo-Soul的可能性">D’Angelo《Untitled
                                        (How Does It Feel)》重新定义了Neo-Soul的可能性</a></h3>
                                <p class="f-thide"><a href="/djradio?id=993479314" class="s-fc4"
                                        title="摇滚群星闪耀时·Ztalk">摇滚群星闪耀时·Ztalk</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm bg">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/172mvTG_rgk0BwFcw3ZGJA==/109951168986940171.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077493392" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077493392" class="s-fc1 f-fw0"
                                        title="歌词里的心理学：“珠玉”沉入泥沙别在今天困住我（单依纯等）">歌词里的心理学：“珠玉”沉入泥沙别在今天困住我（单依纯等）</a></h3>
                                <p class="f-thide"><a href="/djradio?id=975750695" class="s-fc4"
                                        title="千千金曲｜1000首翻唱点评计划">千千金曲｜1000首翻唱点评计划</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm ">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/KK9pBBA-9-oGBxmQk0BRmw==/109951170977457283.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3076997814" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3076997814" class="s-fc1 f-fw0"
                                        title="唱作人，林忆莲。【林忆莲词曲创作盘点】// 唱作人物志 · 礼崩乐好 #128">唱作人，林忆莲。【林忆莲词曲创作盘点】// 唱作人物志 ·
                                        礼崩乐好 #128</a></h3>
                                <p class="f-thide"><a href="/djradio?id=993134566" class="s-fc4"
                                        title="礼崩乐好 | 聚焦华语原创音乐历程">礼崩乐好 | 聚焦华语原创音乐历程</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm bg">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/cqY7VL_gyJ_ux4TLbngmUQ==/109951170525747961.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077506206" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077506206" class="s-fc1 f-fw0"
                                        title="定格在18岁的那些回忆画面">定格在18岁的那些回忆画面</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1220539683" class="s-fc4"
                                        title="Everyday 3">Everyday 3</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm ">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/1MQLHePVqrrri6dJEQ2bSg==/109951171011930319.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077546164" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077546164" class="s-fc1 f-fw0"
                                        title="对话《爱你》编剧×《北上》制片×影评人伊姐：荧幕内外，女性故事自有光芒">对话《爱你》编剧×《北上》制片×影评人伊姐：荧幕内外，女性故事自有光芒</a>
                                </h3>
                                <p class="f-thide"><a href="/djradio?id=1224309522" class="s-fc4"
                                        title="盘桃大会丨桃桃聊天室">盘桃大会丨桃桃聊天室</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=3083097" class="tag u-type">娱乐</a>
                        </li>
                        <li class="itm bg">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/1yWUcNx-n_1LQtaAmgj5Mg==/109951170977451967.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077019768" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077019768" class="s-fc1 f-fw0"
                                        title="小狗的骨頭：我们不是「坏月亮」，我们只是拒绝被定义。// 对话音乐人·礼崩乐好 #127">小狗的骨頭：我们不是「坏月亮」，我们只是拒绝被定义。//
                                        对话音乐人·礼崩乐好 #127</a></h3>
                                <p class="f-thide"><a href="/djradio?id=993134566" class="s-fc4"
                                        title="礼崩乐好 | 聚焦华语原创音乐历程">礼崩乐好 | 聚焦华语原创音乐历程</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm ">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/grS-gEC7Ts9z8Fj3-eGexw==/109951171008506711.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077445965" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077445965" class="s-fc1 f-fw0"
                                        title="荒岛唱片：夏至未至，怀念纯白的少年时代 | 张羊X冬冬串台计划">荒岛唱片：夏至未至，怀念纯白的少年时代 | 张羊X冬冬串台计划</a></h3>
                                <p class="f-thide"><a href="/djradio?id=334" class="s-fc4"
                                        title="亲爱的音乐·宝藏新声季">亲爱的音乐·宝藏新声季</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                        <li class="itm bg">
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/Ug8Rx_C5s_vwZKYm_eysDQ==/109951170604217534.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077388528" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077388528" class="s-fc1 f-fw0"
                                        title="划过了你青春的蛋堡 亲吻 用他的软嘴唇|音乐撞灵魂">划过了你青春的蛋堡 亲吻 用他的软嘴唇|音乐撞灵魂</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1221447845" class="s-fc4"
                                        title="哈人夜现场 | 泛嘻哈文化音频综艺秀">哈人夜现场 | 泛嘻哈文化音频综艺秀</a></p>
                            </div>
                            <a href="/discover/djradio/category?id=2" class="tag u-type">音乐播客</a>
                        </li>
                    </ul>
                </div>
                <div class="blk f-fr">
                    <div class="u-title f-cb">
                        <h3><a href="/discover/djradio/rank" class="f-ff2">节目排行榜</a></h3>
                        <a href="/discover/djradio/rank" class="more s-fc3">更多 &gt;</a>
                    </div>
                    <ul class="m-plylist toplist toplist-r">
                        <li class="itm ">
                            <div class="rank s-fc4 f-fl">
                                <em class="red f-fs1">01</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>1</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/sDj9dpGS_kIn6FXGnuxoWg==/109951170963781338.jpg?param=40x40"
                                    alt="">
                                <i class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077346128" class="s-fc1 f-fw0"
                                        title="「拂晓」：风堇助战曲">「拂晓」：风堇助战曲</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1217975526" class="s-fc4"
                                        title="3.4新BGM《崩坏:星穹铁道》3.3~3.0 合集">3.4新BGM《崩坏:星穹铁道》3.3~3.0 合集</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm bg">
                            <div class="rank s-fc4 f-fl">
                                <em class="red f-fs1">02</em>
                                <i class="u-icn u-icn-75"></i>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/TUvepwNDA8YVNo-V_ro8Zw==/109951167732163761.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077499199" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077499199" class="s-fc1 f-fw0"
                                        title="Run Free(DJ阿智Remix）">Run Free(DJ阿智Remix）</a></h3>
                                <p class="f-thide"><a href="/djradio?id=979457519" class="s-fc4"
                                        title="DJ阿智Remix（单曲集合）">DJ阿智Remix（单曲集合）</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm ">
                            <div class="rank s-fc4 f-fl">
                                <em class="red f-fs1">03</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>38</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/aDJxkdu4G2L0Cshon6_umA==/109951171011587826.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077542107" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077542107" class="s-fc1 f-fw0"
                                        title="拂晓 官方EP（这个音质更高）">拂晓 官方EP（这个音质更高）</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1224373518" class="s-fc4"
                                        title="拂晓 Dawnbreak 崩坏：星穹铁道">拂晓 Dawnbreak 崩坏：星穹铁道</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm bg">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">04</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>4</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/EGrmZoSgGXAsMKq0Wwbhlg==/109951170614898959.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3073487785" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3073487785" class="s-fc1 f-fw0"
                                        title="唯一 (抖音DJ热播版)">唯一 (抖音DJ热播版)</a></h3>
                                <p class="f-thide"><a href="/djradio?id=970494237" class="s-fc4"
                                        title="2025抖音热歌GBM">2025抖音热歌GBM</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm ">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">05</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>8</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p2.music.126.net/hCRPV8x_K3RFHh_pnSQS5w==/109951166427040653.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077524157" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077524157" class="s-fc1 f-fw0"
                                        title="吹牛皮能惹多大祸？【硬核狠人84】">吹牛皮能惹多大祸？【硬核狠人84】</a></h3>
                                <p class="f-thide"><a href="/djradio?id=967212485" class="s-fc4" title="小约翰可汗">小约翰可汗</a>
                                </p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm bg">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">06</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>4</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/DxLs4IX2s1weB_ILT1ZuZQ==/109951170722914633.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3075654984" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3075654984" class="s-fc1 f-fw0"
                                        title="汤令山 Gareth.T 洋葱">汤令山 Gareth.T 洋葱</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1212485490" class="s-fc4"
                                        title="汤令山 Gareth.T">汤令山 Gareth.T</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm ">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">07</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>10</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/9pDGk6ip65gdoIZETi1Kgw==/109951170473059608.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3071402134" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3071402134" class="s-fc1 f-fw0"
                                        title="天雷滚滚我好怕怕">天雷滚滚我好怕怕</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1220166569" class="s-fc4" title="哪吒">哪吒</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm bg">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">08</em>
                                <i class="u-icn u-icn-75"></i>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/38svzGJu4docLAv84lfsGQ==/109951171013487594.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3077525270" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3077525270" class="s-fc1 f-fw0"
                                        title="闽F专属【阳朔DJ-ZYH迷幻全私改-东方大院】">闽F专属【阳朔DJ-ZYH迷幻全私改-东方大院】</a></h3>
                                <p class="f-thide"><a href="/djradio?id=794770544" class="s-fc4"
                                        title="阳朔DJ-ZYH播客 卫星；DJZYH4455">阳朔DJ-ZYH播客 卫星；DJZYH4455</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm ">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">09</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>13</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/ljWOBVLxZj38zxZCcYFOfQ==/109951170936785700.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="3076650876" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=3076650876" class="s-fc1 f-fw0"
                                        title="关山酒（梦泪の小曲）">关山酒（梦泪の小曲）</a></h3>
                                <p class="f-thide"><a href="/djradio?id=1211466703" class="s-fc4"
                                        title="（✕✕）の小曲">（✕✕）の小曲</a></p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                        <li class="itm bg">
                            <div class="rank s-fc4 f-fl">
                                <em class="f-fs1">10</em>
                                <span class="u-rnk u-rnk-up f-ff0"><i class="u-icn u-icn-73"></i>4</span>
                            </div>
                            <a class="cvr u-cover u-cover-tiny f-fl" title="播放">
                                <img src="http://p1.music.126.net/7GpyPLnuwsTsQfM9UsAcAg==/109951167197616199.jpg?param=40x40"
                                    alt="">
                                <i data-res-type="17" data-res-id="2500432188" data-res-action="play"
                                    class="ply f-pa f-dn f-alpha"></i>
                            </a>
                            <div class="cnt f-fl">
                                <h3 class="f-thide"><a href="/program?id=2500432188" class="s-fc1 f-fw0"
                                        title="快乐儿歌《小毛驴》">快乐儿歌《小毛驴》</a></h3>
                                <p class="f-thide"><a href="/djradio?id=973524486" class="s-fc4" title="快乐儿歌">快乐儿歌</a>
                                </p>
                            </div>
                            <div class="hot u-hot f-fl">
                                <el-progress :text-inside="true" :stroke-width="12" :percentage="70" color="#409eff" />
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rdimore">
                <ComNav title="音乐播客·电台" more-text="更多" moreLink="/discover/playlist/" :showIcon="false" :hideBackground="true" />
                <ul class="rdilist f-cb">
                    <li>
                        <a href="/djradio?id=1223992454" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/xjsxeQ3-h528h3BGYyvwuA==/109951170979849895.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223992454" class="s-fc1"
                                    title="与罗大佑共聊18岁：我们着迷的歌">与罗大佑共聊18岁：我们着迷的歌</a></h3>
                            <p class="note s-fc4">罗大佑及音乐人们的18岁歌单！</p>
                        </div>
                    </li>
                    <li>
                        <a href="/djradio?id=1224064487" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/PSy6_RwwgMr22m_mc4DzjA==/109951170916134223.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1224064487" class="s-fc1" title="来福电台">来福电台</a></h3>
                            <p class="note s-fc4">旅行团乐队20周年特别呈现，致敬经典唱片！</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1223246483" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/C2nA3I9VpplLA6fNhK1K6A==/109951170726186793.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223246483" class="s-fc1"
                                    title="探索72小时|蓝色星球调频">探索72小时|蓝色星球调频</a></h3>
                            <p class="note s-fc4">在自然·阅读·宇宙中，和音乐一起漫游</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1222654564" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p1.music.126.net/LORkKxHUfKnvUta4PaXnIQ==/109951170650760569.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1222654564" class="s-fc1" title="无乐不作">无乐不作</a></h3>
                            <p class="note s-fc4">在音乐中感受最简单的快乐</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="rdimore">
                <ComNav title="情感·电台" more-text="更多" moreLink="/discover/playlist/" :showIcon="false" :hideBackground="true" />
                <ul class="rdilist f-cb">
                    <li>
                        <a href="/djradio?id=1223992454" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/xjsxeQ3-h528h3BGYyvwuA==/109951170979849895.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223992454" class="s-fc1"
                                    title="与罗大佑共聊18岁：我们着迷的歌">与罗大佑共聊18岁：我们着迷的歌</a></h3>
                            <p class="note s-fc4">罗大佑及音乐人们的18岁歌单！</p>
                        </div>
                    </li>
                    <li>
                        <a href="/djradio?id=1224064487" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/PSy6_RwwgMr22m_mc4DzjA==/109951170916134223.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1224064487" class="s-fc1" title="来福电台">来福电台</a></h3>
                            <p class="note s-fc4">旅行团乐队20周年特别呈现，致敬经典唱片！</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1223246483" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/C2nA3I9VpplLA6fNhK1K6A==/109951170726186793.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223246483" class="s-fc1"
                                    title="探索72小时|蓝色星球调频">探索72小时|蓝色星球调频</a></h3>
                            <p class="note s-fc4">在自然·阅读·宇宙中，和音乐一起漫游</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1222654564" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p1.music.126.net/LORkKxHUfKnvUta4PaXnIQ==/109951170650760569.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1222654564" class="s-fc1" title="无乐不作">无乐不作</a></h3>
                            <p class="note s-fc4">在音乐中感受最简单的快乐</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="rdimore">
                <ComNav title="创作翻唱·电台" more-text="更多" moreLink="/discover/playlist/" :showIcon="false" :hideBackground="true" />
                <ul class="rdilist f-cb">
                    <li>
                        <a href="/djradio?id=1223992454" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/xjsxeQ3-h528h3BGYyvwuA==/109951170979849895.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223992454" class="s-fc1"
                                    title="与罗大佑共聊18岁：我们着迷的歌">与罗大佑共聊18岁：我们着迷的歌</a></h3>
                            <p class="note s-fc4">罗大佑及音乐人们的18岁歌单！</p>
                        </div>
                    </li>
                    <li>
                        <a href="/djradio?id=1224064487" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/PSy6_RwwgMr22m_mc4DzjA==/109951170916134223.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1224064487" class="s-fc1" title="来福电台">来福电台</a></h3>
                            <p class="note s-fc4">旅行团乐队20周年特别呈现，致敬经典唱片！</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1223246483" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/C2nA3I9VpplLA6fNhK1K6A==/109951170726186793.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223246483" class="s-fc1"
                                    title="探索72小时|蓝色星球调频">探索72小时|蓝色星球调频</a></h3>
                            <p class="note s-fc4">在自然·阅读·宇宙中，和音乐一起漫游</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1222654564" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p1.music.126.net/LORkKxHUfKnvUta4PaXnIQ==/109951170650760569.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1222654564" class="s-fc1" title="无乐不作">无乐不作</a></h3>
                            <p class="note s-fc4">在音乐中感受最简单的快乐</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="rdimore">
                <ComNav title="知识·电台" more-text="更多" moreLink="/discover/playlist/" :showIcon="false" :hideBackground="true" />
                <ul class="rdilist f-cb">
                    <li>
                        <a href="/djradio?id=1223992454" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/xjsxeQ3-h528h3BGYyvwuA==/109951170979849895.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223992454" class="s-fc1"
                                    title="与罗大佑共聊18岁：我们着迷的歌">与罗大佑共聊18岁：我们着迷的歌</a></h3>
                            <p class="note s-fc4">罗大佑及音乐人们的18岁歌单！</p>
                        </div>
                    </li>
                    <li>
                        <a href="/djradio?id=1224064487" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/PSy6_RwwgMr22m_mc4DzjA==/109951170916134223.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1224064487" class="s-fc1" title="来福电台">来福电台</a></h3>
                            <p class="note s-fc4">旅行团乐队20周年特别呈现，致敬经典唱片！</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1223246483" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p2.music.126.net/C2nA3I9VpplLA6fNhK1K6A==/109951170726186793.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1223246483" class="s-fc1"
                                    title="探索72小时|蓝色星球调频">探索72小时|蓝色星球调频</a></h3>
                            <p class="note s-fc4">在自然·阅读·宇宙中，和音乐一起漫游</p>
                        </div>
                    </li>
                    <li style="border-bottom-color:#fff;">
                        <a href="/djradio?id=1222654564" class="cvr u-cover u-cover-rdi f-fl">
                            <img src="http://p1.music.126.net/LORkKxHUfKnvUta4PaXnIQ==/109951170650760569.jpg?param=200y200"
                                alt="">
                        </a>
                        <div class="cnt">
                            <h3 class="f-fs3"><a href="/djradio?id=1222654564" class="s-fc1" title="无乐不作">无乐不作</a></h3>
                            <p class="note s-fc4">在音乐中感受最简单的快乐</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ComNav from '../components/ComNav.vue'
// 当前页状态（0：第一页，1：第二页）
const currentPage = ref(0)

// 数据
const firstPage = [
    { text: '情感', img: 'https://p4.music.126.net/icULXvfqWJMFvcjTrXSLeA==/109951165406422565.jpg', link: '/discover/djradio/category?id=3' },
    { text: '音乐播客', img: 'https://p4.music.126.net/fWonYYR8sORR2mEKZfYqjQ==/109951165406418703.jpg', link: '/discover/djradio/category?id=2' },
    { text: '有声书', img: 'https://p3.music.126.net/Tg1Ids_gRSqaZXyZ3zj0Sg==/109951166109395795.jpg', link: '/discover/djradio/category?id=10001' },
    { text: '脱口秀', img: 'https://p4.music.126.net/LIkzDiW_ktaSbk_s6MgMkg==/109951165406441809.jpg', link: '/discover/djradio/category?id=8' },
    { text: '创作翻唱', img: 'https://p3.music.126.net/GqeTI3A_g4FFzm_4MoNSsQ==/109951165406411412.jpg', link: '/discover/djradio/category?id=2001' },
    { text: '电音', img: 'https://p3.music.126.net/3qyLawhgmTyHNabhuaKYTg==/109951165406422635.jpg', link: '/discover/djradio/category?id=10002' },
    { text: '知识', img: 'https://p4.music.126.net/wOmtE80i2EMG2dR7DnTJUw==/109951166108735875.jpg', link: '/discover/djradio/category?id=11' },
    { text: '二次元', img: 'https://p3.music.126.net/bOFLdKG966TolZNpA1VYtw==/109951166108595279.jpg', link: '/discover/djradio/category?id=3001' },
    { text: '明星专区', img: 'https://p3.music.126.net/hxNgvipzXFp570FgkiFGcQ==/109951166108605164.jpg', link: '/discover/djradio/category?id=14' },
    { text: '生活', img: 'https://p4.music.126.net/X3gH1OSeg5xQV5bqSv-cEg==/109951166108614572.jpg', link: '/discover/djradio/category?id=6' },
    { text: '亲子', img: 'https://p4.music.126.net/krSruAC4wwq3TXJkcSHvUQ==/109951166108617045.jpg', link: '/discover/djradio/category?id=13' },
    { text: '资讯', img: 'https://p4.music.126.net/OS8NVOBjZoznnOc5YSBy3w==/109951166108651181.jpg', link: '/discover/djradio/category?id=3087096' },
    { text: '广播剧', img: 'https://p4.music.126.net/la9HvnMewT3lp72DL-NgKA==/109951166108675738.jpg', link: '/discover/djradio/category?id=3088097' },
    { text: '故事', img: 'https://p3.music.126.net/4pgJFKZYNU1tZxQdp6xa-A==/109951166111062508.jpg', link: '/discover/djradio/category?id=3080097' },
    { text: '人文历史', img: 'https://p4.music.126.net/HXCbeAs1YDXgOOwE9oY2ew==/109951166111050278.jpg', link: '/discover/djradio/category?id=3080098' },
    { text: '娱乐', img: 'https://p3.music.126.net/gFOkDDYZa8m93ccvIlmmvg==/109951166108686306.jpg', link: '/discover/djradio/category?id=3083097' },
    { text: '相声曲艺', img: 'https://p4.music.126.net/BwIOmsgRTVLL1vrVieJD9w==/109951166108695116.jpg', link: '/discover/djradio/category?id=3088098' },
    { text: '其他', img: 'https://p3.music.126.net/W1j-Lb5ozohzud342aPIpw==/109951166108699096.jpg', link: '/discover/djradio/category?id=3081098' }
]


const secondPage = [
    { text: '文学出版', img: 'https://p3.music.126.net/J6CDM2JxkIjO6StPTR8o7A==/109951167465550002.jpg', link: '/discover/djradio/category?id=3148096' },
    { text: '常见问题', img: '/src/assets/Blog/radio_faq.png', link: '#/topic?id=18652232' },
    { text: '我要做主播', img: '/src/assets/Blog/radio_apply.png', link: '/st/ncreator/manage/voice' }
]

// 控制函数
const prevPage = () => {
    if (currentPage.value > 0) currentPage.value--
}

const nextPage = () => {
    if (currentPage.value < 1) currentPage.value++
}

const goToPage = (index: number) => {
    currentPage.value = index
}
</script>

<style lang="scss" scoped>
.container {
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .warp {
        padding: 40px;

        .rditype {
            margin-bottom: 20px;

            li {
                float: left;
                margin: 0 0 25px 33px;
            }

            a {
                display: block;
                width: 70px;
                height: 70px;
                background-position: 0 9999px !important;
                text-align: center;
                color: #888;
                background: url(../assets/Blog/radio_bg.png) no-repeat;

                em {
                    margin-top: -3px;
                }

                &:hover {
                    background-position: 0 0 !important;
                    text-decoration: none;
                }
            }

            .icon {
                width: 48px;
                height: 48px;
                margin: 2px auto 0;
                background-position: 0 0;
            }

            .boxes {
                overflow: hidden;
                max-height: 194px;
                height: 194px;

                ul {
                    margin-left: -33px;
                }

                .z-show {
                    display: block !important;
                }

                .box {
                    display: none;
                }
            }

            .z-dis {
                opacity: 0.08 !important;
            }

            .prev {
                left: -26px;
                background-position: 0 -30px !important;
                position: absolute;
                top: 50%;
                width: 20px;
                height: 30px;
                margin-top: -15px;
                opacity: 0.25;
                text-indent: -9999px;
                cursor: pointer;
                background: url(../assets/Blog/radio_slide.png) no-repeat;

                &:hover {
                    opacity: 0.4;
                }
            }

            .next {
                right: -26px;
                background-position: -30px -30px !important;
                position: absolute;
                top: 50%;
                width: 20px;
                height: 30px;
                margin-top: -15px;
                opacity: 0.25;
                text-indent: -9999px;
                cursor: pointer;
                background: url(../assets/Blog/radio_slide.png) no-repeat;

                &:hover {
                    opacity: 0.4;
                }
            }

            .dotpage {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0px;
                width: 100%;
                height: 20px;
                text-align: center;
                line-height: 0;
            }

            .z-curr,
            .dot:hover {
                background-position: -30px 0 !important;
            }

            .dot {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-position: 0 0;
                text-indent: -9999px;
                cursor: pointer;
                background: url(../assets/Blog/radio_slide.png) no-repeat;
            }
        }

        .rditop {
            margin-top: 10px;

            .blk {
                width: 426px;

                .u-title {
                    height: 40px;
                    border-bottom: 2px solid #c20c0c;

                    h3 {
                        float: left;
                        font-size: 24px;
                        font-weight: normal;
                    }

                    .more {
                        float: right;
                        margin-top: 14px;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .toplist {
                    height: 600px;
                    border: 1px solid #e2e2e2;
                    border-top: none;

                    .itm {
                        float: left;
                        background: #fff;
                        width: 424px;
                        height: 40px;
                        padding: 10px 0;
                        line-height: 40px;
                        box-sizing: content-box;

                        .rank {
                            width: 47px;
                            margin: 6px 0 0 0;
                            text-align: center;
                            line-height: normal;

                            .red {
                                color: #da4545;
                            }

                            .u-rnk-up {
                                color: #ba2226;
                            }

                            .u-rnk {
                                line-height: normal;
                                font-size: 10px;
                            }

                            i {
                                margin: -1px 2px 0 0;
                                vertical-align: middle;
                                font-style: normal;
                                text-align: left;
                                font-size: inherit;
                            }

                            .u-icn-73 {
                                width: 6px;
                                height: 6px;
                                background-position: -74px -304px !important;
                            }

                            .u-icn-75 {
                                width: 16px;
                                height: 17px;
                                background-position: -67px -283px !important;
                            }

                            .u-icn {
                                display: inline-block;
                                overflow: hidden;
                                vertical-align: middle;
                                background: url(../assets/Home/Recommend/icon.png) no-repeat;
                            }

                            em {
                                display: block;
                                width: 100%;
                                text-align: center;
                                font-style: normal;
                            }
                        }

                        &:hover {
                            background: #eee;
                        }

                        &:hover .cvr .ply {
                            display: block;
                        }

                        .cvr {
                            margin-left: 20px;
                        }

                        .u-cover-tiny {
                            width: 40px;
                            height: 40px;

                            .ply {
                                position: absolute;
                                display: none;
                                width: 22px;
                                height: 22px;
                                top: 50%;
                                left: 50%;
                                overflow: hidden;
                                margin: -11px 0 0 -11px;
                                background-position: 0 -85px !important;
                                background: url(../assets/Home/Recommend/iconall.png) no-repeat;
                            }
                        }

                        .u-cover {
                            position: relative;
                            display: block;

                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .cnt {
                            width: 208px;
                            margin: 1px 0 0 10px;
                            line-height: 20px;

                            .f-thide {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                            }

                            h3 {
                                font-size: 100%;
                            }
                        }

                        .tag {
                            margin: 1px 0 0 10px;
                        }

                        .u-type {
                            display: inline-block;
                            position: relative;
                            top: -1px;
                            height: 16px;
                            overflow: hidden;
                            padding: 0 6px;
                            border: 1px solid #999;
                            line-height: 16px;
                            color: #999;
                            vertical-align: middle;
                            font-size: 12px;

                            &:hover {
                                border-color: #666;
                                color: #666;
                                text-decoration: none;
                            }
                        }

                        .hot {
                            margin-top: 12px;
                        }

                        .u-hot {
                            display: block;
                            position: relative;
                            width: 90px;
                        }
                    }

                    .bg {
                        background: #f7f7f7;
                    }
                }
            }
        }

        .rdimore {
            margin-top: 35px;

            .rdilist {
                margin-left: -30px;

                h3 {
                    margin: 16px 0 20px;
                }

                li {
                    float: left;
                    width: 430px;
                    height: 120px;
                    margin-left: 30px;
                    padding: 20px 0;
                    border-bottom: 1px solid #e7e7e7;
                    box-sizing: content-box;
                }

                .cvr {
                    margin-right: -200px;
                }

                .u-cover-rdi {
                    width: 120px;
                    height: 120px;
                }

                .u-cover {
                    position: relative;
                    display: block;

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }

                .cnt {
                    margin-left: 140px;

                    .s-fc1:hover {
                        color: #000;
                        text-decoration: underline;
                    }
                }

                .note {
                    margin-bottom: 6px;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>